<template>
    <page-container>

        <view slot="header">
            <cu-custom :isBack="true" bgColor="bg-white">
                <block slot="content">充值</block>
            </cu-custom>
        </view>
        <view slot="center" class="auto-100 ">

            <view class="section bg-gray">
                <view class="way-wrapper ">
                    <view class="item"> 充值方式:</view>
                    <view class="way-content df-ai-cen flex1">
                        <picker mode="selector" :range='way' :range-key='way1' @change="wayChange" class="df-ai-cen">
                            <view class="df-ai-cen" style='width:100%'>
                                <view class="way-icon">
                                    <image v-if="cashWay==0" src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/wallet/wechat.png">
                                        <image v-if="cashWay==1" src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/wallet/alipay.png">
                                </view>
                                <view class="way">
                                    {{way2?way2:'请选择充值方式'}}
                                </view>
                                <view class="icon">
                                    <image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/setting/rightarrow.png">
                                </view>
                            </view>
                        </picker>
                    </view>
                </view>
                <view class="money-wrapper bg-white df-cen-rl">
                    <view class="num" v-for="(item, idx) in comboList" :key="idx" @click="select(idx)" :class="{active:idx==actIdx}">
                        <text>￥</text>
                        <view>{{item.price}}</view>
                    </view>
                </view>
                <view class="btn bg-gradual-orange round" @click="submitCharge">充值</view>
            </view>
        </view>
    </page-container>
</template>

<script>
import {
	getMemberreCharge,
	memberreCharge
} from '@/common/js/request/modules/public.js'

export default {
	data() {
		return {
			// '支付宝'
			way: [
				'微信'
			],
			way1: '',
			way2: '',
			cashWay: 2,
			comboList: [],
			actIdx: null,
			recharge_id: null,
			payThrottle: false

		}
	},
	onLoad(e) { },
	onShow(e) { },
	methods: {
		wayChange(e) {
			if (e.detail.value == 0) {
				this.way1 = 'wechatpay'
				this.way2 = '微信'
				this.cashWay = 0
			} else {
				this.way1 = 'alipay'
				this.way2 = '支付宝'
				this.cashWay = 1
			}
		},
		getComboInfo() {
			getMemberreCharge().then(res => {
				// console.log(res);
				this.comboList = res.data.list.map(v => {
					v['price'] = v.buy_price.substring(0, v.buy_price.length - 3)
					return v
				})
				console.log(this.comboList, '....ass')
			})
		},
		select(idx) {
			// console.log(idx);
			this.actIdx = idx
			this.recharge_id = this.comboList[idx].recharge_id
		},
		submitCharge() {
			if (this.way1 == 'alipay') {
				this.$util.tip('支付宝充值尚未开通')
				return
			}
			if (this.cashWay == 2) {
				this.$util.tip('请选择充值方式')
				return
			}

			let chargeInfoObj = {
				recharge_id: this.recharge_id,
				app_type: 'h5',
				app_type_name: 'H5'
			}
			if (!this.recharge_id) {
				this.$util.tip('请选择充值额度')
				return
			}
			memberreCharge(chargeInfoObj).then(res => {
				if (this.payThrottle) return false
				this.payThrottle = true
				// console.log(res);
				let config = {
					out_trade_no: res.data,
					pay_type: this.way1
				}
				this.$request.setPay(config).then(ress => {
					console.log(ress)
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						...ress.data.data,
						success: succ => {
							this.$util.redirectTo('/publicPages/wallet/wallet')
						},
						fail: e => {
							console.log('logfailfail', e)
							this.payThrottle = false
						}
					})
					// #endif

					// #ifdef H5
					console.log('setPaysetPay', ress)
					if (this.isNativeApp()) {
						location.href = ress.app_url
					} else {
						// 判断是否在微信浏览器
						if (this.$util.isWeiXin()) {
							WeixinJSBridge.invoke(
								'getBrandWCPayRequest', {
									appId: ress.data.appId,
									timeStamp: ress.data.timestamp,
									nonceStr: ress.data.nonceStr,
									package: ress.data.package,
									signType: ress.data.signType,
									paySign: ress.data.paySign
								},
								// 调起微信支付成功
								success => {
									WeixinJSBridge.log(success.err_msg)
									if (success.err_msg == 'get_brand_wcpay_request:ok') {
										this.$util.redirectTo('/publicPages/wallet/wallet')
									} else {
										this.payThrottle = false
									}
								}
							)
						} else {
							location.href = ress.wx_url
						}
					}
					// #endif
				})
			})

		}
	},
	mounted() {
		this.getComboInfo()
	}
}
</script>

<style lang="scss">
.btn {
    margin: 50px auto;
    width: 60%;
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
}

image {
    width: 100%;
    height: 100%;
}

.boder-padding {
    background-color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #f4f4f4;
}

.section {
    height: 100%;

    .boder-padding {
        background-color: #fff;
        padding: 15px 0;
        border-bottom: 1px solid #f4f4f4;
    }

    .way-wrapper {
        border-bottom: 3px solid #f4f4f4;
        border-top: 3px solid #f4f4f4;
        background-color: #fff;
        padding: 15px 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .item {
            margin-right: 5px;
        }

        .way {
            width: 100%;
        }

        .way-icon {
            image {
                width: 36px;
                height: 36px;
            }
        }

        .icon {
            width: 16px;
            height: 16px;
        }
    }

    .money-wrapper {
        padding: 10px 10px 0;
        flex-wrap: wrap;
        text-align: center;

        .num {
            padding: 13px 5px 13px 0;
            width: 30%;
            font-size: 16px;
            background: #ffffff;
            border: 1px solid #cccccc;
            border-radius: 8px;
            font-weight: bold;
            color: #222222;
            align-items: baseline;
            margin-bottom: 10px;

            > view {
                display: inline-block;
                font-size: 25px;
                font-family: DIN;
                font-weight: bold;
                color: #222222;
            }
        }

        .active {
            background: rgba(255, 154, 106, 0.1);
            border: 2px solid #fa6d5d;
        }
    }
}
</style>
